<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码重构与技术提升</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .section-title {
            position: relative;
            padding-left: 20px;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 80%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .first-letter::first-letter {
            font-size: 3em;
            font-weight: 700;
            float: left;
            line-height: 1;
            margin-right: 8px;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .principle-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-left: 4px solid;
            transition: all 0.3s ease;
        }
        
        .principle-card:hover {
            transform: translateX(10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }
        
        .method-card {
            background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        
        .method-card:hover {
            border-color: #667eea;
            background: white;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.1);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-32 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 left-10 w-64 h-64 bg-white rounded-full filter blur-3xl"></div>
            <div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-300 rounded-full filter blur-3xl"></div>
        </div>
        
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-4xl mx-auto text-center animate-fadeInUp">
                <h1 class="text-5xl md:text-7xl font-bold mb-6">
                    代码重构与技术提升
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">
                    探索软件开发中的艺术与科学
                </p>
                <div class="flex justify-center space-x-4 text-lg">
                    <span><i class="fas fa-code mr-2"></i>代码优化</span>
                    <span><i class="fas fa-chart-line mr-2"></i>持续改进</span>
                    <span><i class="fas fa-users mr-2"></i>团队协作</span>
                </div>
            </div>
        </div>
        
        <div class="scroll-indicator text-white">
            <i class="fas fa-chevron-down text-2xl"></i>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <p class="text-lg leading-relaxed text-gray-700 first-letter">
                    在软件开发过程中，代码重构是提高代码质量、可维护性和可扩展性的关键环节。无论是为了适应新的需求，还是为了优化现有的系统，定期进行代码重构都能帮助开发团队保持代码的简洁性和清晰性。与此同时，技术提升则是每个程序员在职业生涯中必须不断追求的目标，随着技术的变化，程序员必须不断学习新技术、掌握新的编程技巧，以便适应行业的发展。
                </p>
            </div>
        </div>
    </section>

    <!-- Section 1: 代码重构的定义和重要性 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-4xl font-bold mb-12 text-center text-gradient">
                    <i class="fas fa-lightbulb mr-3"></i>代码重构的定义和重要性
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <div class="card-hover bg-white rounded-xl p-8 shadow-lg">
                        <h3 class="text-2xl font-semibold mb-4 section-title">什么是代码重构？</h3>
                        <p class="text-gray-700 leading-relaxed">
                            代码重构是指对现有代码进行修改、调整和优化，目的是提高代码的可读性、可维护性、性能等，而不会改变其外部行为或功能。重构并不添加新特性或修复Bug，而是优化现有功能，使其更清晰、简洁、灵活。
                        </p>
                    </div>
                    
                    <div class="card-hover bg-white rounded-xl p-8 shadow-lg">
                        <h3 class="text-2xl font-semibold mb-4 section-title">为什么要进行代码重构？</h3>
                        <div class="space-y-3">
                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <strong class="text-gray-800">提高代码可读性</strong>
                                    <p class="text-gray-600 text-sm mt-1">使代码更简洁、清晰，有利于团队成员理解和维护</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <strong class="text-gray-800">增强代码可维护性</strong>
                                    <p class="text-gray-600 text-sm mt-1">提升可扩展性和可修改性，减少未来修改的难度</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <strong class="text-gray-800">优化性能</strong>
                                    <p class="text-gray-600 text-sm mt-1">去除冗余代码、优化算法和数据结构</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <strong class="text-gray-800">减少技术债务</strong>
                                    <p class="text-gray-600 text-sm mt-1">清除低质量代码，避免问题积累</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section 2: 代码重构的原则 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-4xl font-bold mb-12 text-center text-gradient">
                    <i class="fas fa-compass mr-3"></i>代码重构的原则
                </h2>
                
                <p class="text-lg text-gray-700 text-center mb-12 max-w-3xl mx-auto">
                    在进行代码重构时，我们应遵循一些最佳实践和原则，以确保重构过程的顺利进行和重构后的代码质量。
                </p>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="principle-card" style="border-color: #667eea;">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-shoe-prints text-purple-600 mr-3"></i>
                            小步前进
                        </h3>
                        <p class="text-gray-700">
                            每次重构都应该尽量小而易行，不应一次性进行大规模的重构。小步前进的重构可以避免出现大规模的错误，便于回滚和调整。
                        </p>
                    </div>
                    
                    <div class="principle-card" style="border-color: #764ba2;">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-shield-alt text-purple-700 mr-3"></i>
                            保持功能不变
                        </h3>
                        <p class="text-gray-700">
                            重构的核心原则是保持代码的外部行为不变。我们需要确保在重构过程中，现有的功能和接口不受到影响。可以通过单元测试和集成测试来确保功能的一致性。
                        </p>
                    </div>
                    
                    <div class="principle-card" style="border-color: #8b5cf6;">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-vial text-purple-500 mr-3"></i>
                            重构前进行测试
                        </h3>
                        <p class="text-gray-700">
                            在开始重构之前，应该确保现有代码已经有完整的单元测试和集成测试覆盖。这些测试将作为重构过程中的"安全网"，可以帮助我们及时发现问题并进行修复。
                        </p>
                    </div>
                    
                    <div class="principle-card" style="border-color: #a855f7;">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-chart-line text-purple-400 mr-3"></i>
                            逐步改进
                        </h3>
                        <p class="text-gray-700">
                            重构是一个持续改进的过程，每次进行的修改都应该尽量局部化。只有在发现问题时，才应该进行适当的调整。不要试图一次性解决所有问题，而是通过一系列的小改动逐步优化代码。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-3xl font-bold mb-8 text-center">代码重构流程图</h2>
                <div class="bg-white rounded-xl shadow-lg p-8">
                    <div class="mermai